<template>
  <icon :style="{ color: 'hotpink' }">
    <template #component>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="14.51677307022635"
        height="14"
        viewBox="0 0 14.51677307022635 14"
        fill="none"
      >
        <path
          id="分组 1"
          fill-rule="evenodd"
          :style="state.style"
          transform="translate(0 0)  rotate(0 7.258386535113178 7)"
          d="M0 12.2C0 13.2 0.73 14 1.63 14L12.88 14C13.79 14 14.52 13.2 14.52 12.2L14.52 8.4L11.52 8.4L11.52 9.2C11.56 9.6 11.27 9.96 10.87 10C10.47 10.03 10.11 9.74 10.07 9.34C10.07 9.29 10.07 9.25 10.07 9.2L10.07 8.4L4.45 8.4L4.45 9.2C4.49 9.6 4.19 9.96 3.79 10C3.39 10.03 3.03 9.74 2.99 9.34C2.99 9.29 2.99 9.25 2.99 9.2L2.99 8.4L0 8.4L0 12.2Z M1.63 2.6C0.73 2.6 0 3.4 0 4.4L0 7.4C1 7.4 2 7.3 2.99 7.3C3 6.89 3.31 6.55 3.72 6.5C4.14 6.51 4.46 6.86 4.45 7.28C4.45 7.28 4.45 7.29 4.45 7.3L10.07 7.3C10.08 6.89 10.39 6.55 10.8 6.5C11.21 6.51 11.54 6.86 11.53 7.28C11.53 7.28 11.53 7.29 11.52 7.3L14.52 7.3L14.52 4.3C14.52 3.3 13.79 2.5 12.88 2.5L10.98 2.5L10.98 1.8C10.98 0.8 10.25 0 9.35 0L5.17 0C4.27 0 3.54 0.8 3.54 1.8L3.54 2.6L1.63 2.6Z M4.53548 1.8018L4.53548 2.6018L9.98548 2.6018L9.98548 1.8018C9.98548 1.7918 9.98548 1.7818 9.98548 1.7718C9.99548 1.4118 9.70548 1.1118 9.34548 1.1018L5.17548 1.1018C5.16548 1.1018 5.15548 1.1018 5.14548 1.1018C4.78548 1.1318 4.51548 1.4418 4.53548 1.8018Z "
        />
      </svg>
    </template>
  </icon>
</template>
<script lang="ts" setup>
import { ref, reactive, withDefaults, defineProps, defineEmits } from 'vue'
import Icon from '@ant-design/icons-vue'
interface Props {
  imageColor?: string | undefined
}
const props = withDefaults(defineProps<Props>(), {
  imageColor: '#fe9600',
})
const state: any = reactive({
  style: `fill: ${props.imageColor}`,
})
</script>
